<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>拆快递</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "\5B8B\4F53";
        }
        html,body,#content,#gameBox{
            height: 100%;
        }
        #gameBox{
            background: url("./img/chai-back_02.png") no-repeat;
            background-size: 100% 100%;
            padding-top: 1px;
            box-sizing: border-box;
        }
        .imgBox{}
        .imgBox img{
            width: 100%;
            height: auto;
        }
        .gamebox{
            margin-top: 55%;
            padding: 0 20px;
            position: relative;
        }
        .dao{
            position: absolute;
            left: 14%;
            bottom:40%;
            width: 40px;
            height: 55px;
        }
        .line{
            position: absolute;
            left: 15%;
            bottom: 44%;
            width: 0;
            height: 3px;
            background: #73502f;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
        .countBox{
            position: absolute;
            left: 46%;
            bottom: 10%;
            width: 31%;
            height: 18%;
            text-align: center;
        }
        .countBox .text{
            padding-top: 10%;
            color: #8db7e9;
            font-size: 13px;
        }
        .countBox .text .num{
            color: #fd7910;
            font-size: 20px;
        }
        .x-dialog-back{
            /*display: none;*/
            background: rgba(0,0,0,0.6);
            position: fixed;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
            z-index: 6;
        }
        .x-dialog{
            position: fixed;
            left: 50%;
            width: 270px;
            margin-left: -135px;
            top:50%;
            z-index: 7;
            padding: 0 25px;
            box-sizing: border-box;
            /*display: none;*/
        }
        .x-dialog-info{
            margin-top: 77%;
            padding: 0 10px;
            font-size: 14px;
            line-height: 20px;
            color: #868686;
            margin-bottom: 10px;
        }
        .x-dialog-close{
            width: 30px;
            height: 30px;
            background: url("./img/back-close_03.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            margin-left: -15px;
            bottom: -80px
        }
        .x-dialog-btn{
            background: #d70808;
            color: white;
            border-radius: 6px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 16px;
        }
        .x-dialog-btn:active{
            background: #b10707;
        }
        /*-----------------动画----------------*/
        .fade-enter-active,.fade-leave-active{
            transition: opacity 0.3s;
            opacity: 1;
        }
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .bottom-enter-active,.bottom-leave-active{
            transition: all 0.3s;
            transform: translate3d(0,0,0);
        }
        .bottom-enter,.bottom-leave-to{
            transform: translate3d(0,150%,0);
        }
        .failBox{
            height: 290px;
            margin-top: -145px;
            background: url("./img/chai-fail-back_03.png") no-repeat;
            background-size: 100% 100%;
        }
        .successBox{
            height: 300px;
            margin-top: -150px;
            background: url("./img/back-success_03.png") no-repeat;
            background-size: 100% 100%;
        }
        .gamePush{
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            font-size: 14px;
            left: 0;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="gameBox">
        <div class="gamebox">
            <div class="imgBox" ref="box">
                <img src="./img/chai-people_03.png" alt="">
            </div>
            <div class="countBox">
                <div class="text">您还有 <span class="num">{{residueNum}}</span>个快递</div>
            </div>
            <div class="line" v-bind:style="{width: lineWidth + 'px'}"></div>
            <div class="imgBox dao" v-bind:style="{left: moveX}" v-on:touchmove="move" v-on:touchstart="startFn">
                <img src="./img/chai-dao_03.png" alt="">
            </div>
        </div>
        <!--弹窗-->
        <transition name="fade">
            <div class="x-dialog-back" v-show="backSwitch"></div>
        </transition>
        <transition name="bottom">
            <div class="x-dialog failBox" v-show="failSwitch">
                <div class="x-dialog-close" v-on:click.prevent.stop="closeBack"></div>
                <div class="x-dialog-info">
                    &nbsp; <br>
                    &nbsp;
                </div>
                <div class="x-dialog-btn" v-on:click="toAgain">再来一次</div>
            </div>
        </transition>
        <transition name="bottom">
            <div class="x-dialog successBox" v-show="successSwitch">
                <div class="x-dialog-close" v-on:click.prevent.stop="closeBack"></div>
                <div class="x-dialog-info">
                    恭喜你获得xxx一台
                    有效期2018/04/25-2018/06/18
                    兑奖地址: 高新区xxxxx
                </div>
                <div class="x-dialog-btn" v-on:click="toAgain">兑奖</div>
            </div>
        </transition>
    </div>
</div>
<script src="../utils/http-service.js"></script>
<script>
    new Vue({
        el: "#content",
        data:{
            moveX: '14%',
            start: 0,
            end: 0,
            residueNum: 0,
            boxWidth: 0,
            lineWidth: 0,
            moveStarX: 0,
            startCha: 0,
            isEnd:false,
            backSwitch: false,
            failSwitch: false,
            successSwitch:false
        },
        created(){
            let _this = this;
            api.eligibleToPlay(function(n){
                _this.residueNum = n;
            });
            share('chaikuaidi'); //设置分享
        },
        mounted(){
            this.boxWidth = this.$refs.box.offsetWidth + 40;
            this.start = this.boxWidth * 0.14;
            this.end = this.boxWidth - this.boxWidth * 0.14 - 5;
        },
        methods:{
            startFn(e){
                if(this.residueNum == 0){
                    onToast('您没有抽奖次数了哦',2000);
                    return
                }
                var sx = e.touches[0].pageX;
                this.startCha = sx - this.start;
                this.moveStarX = sx;
            },
            move(e){
                if(this.residueNum == 0) return;
                if(this.isEnd) return;
                let x = e.touches[0].pageX;
                let x1 = x - this.moveStarX + this.startCha;
                if(x >= this.start && x <= this.end){
                    if(x1 > this.lineWidth){
                        this.lineWidth = x1
                    }
                    if(x >= this.end - 10){
                        this.isEnd = true;
                        this.choujiang();
                    }
                    this.moveX = x + 'px';
                }
            },
            choujiang(){
                let _this = this;
                onToast('抽奖中...');
                api.lottery('chaikuaidi',function(res){
                    offToast();
                    _this.openBack();
                    if(res.data.is_winning){
                        _this.openDialog('success');
                    }else{
                        _this.openDialog('fail');
                    }
                    _this.residueNum = res.data.surplus_times;
                })
            },
            toAgain(){
                this.reloadPage();
                this.closeBack();
            },
            reloadPage(){
                this.moveX ='14%';
                this.lineWidth = 0;
                this.moveStarX = 0;
                this.startCha = 0;
                this.isEnd = false;
            },
            openBack(){
                this.backSwitch = true;
            },
            closeBack(){
                this.backSwitch = false;
                this.failSwitch = false;
                this.successSwitch = false;
            },
            openDialog(str){
                this[str + 'Switch'] = true;
            },
            closeDialog(str){
                this[str + 'Switch'] = false;
            }
        }
    })
</script>
</body>
</html>